<!-- /*
*   @Description:
*   @Author:lxy
*   @Date:2023-03-23 10:23
*/ -->
<template>
  <div>
    <div class="info_1 fl">
      <div class="text_1 fff">
        <div class="fl">
          <img src="../images/info_1.png" />
          <div class="fl count">
            <p class="titleP">总停车位(个)</p>
            <p class="conuts">540</p>
          </div>
        </div>
        <div class="fl">
          <img src="../images/info_2.png" />
          <div class="fl count">
            <p class="titleP">空闲(个)</p>
            <p class="conuts">90</p>
          </div>
        </div>
        <div class="fl">
          <img src="../images/info_3.png" />
          <div class="fl count">
            <p class="titleP">已使用(个)</p>
            <p class="conuts">450</p>
          </div>
        </div>
      </div>
    </div>
    <div class="info_2 fl">
      <div class="text_2 fff">
        <div class="fl">
          <img src="../images/info_4.png" />
          <div class="fl count">
            <p class="titleP">昨日车辆总数(辆)</p>
            <p class="conuts">783</p>
          </div>
        </div>
        <div class="fl">
          <img src="../images/info_5.png" />
          <div class="fl count">
            <p class="titleP">今日车辆总数(辆)</p>
            <p class="conuts">450</p>
          </div>
        </div>
      </div>
    </div>
    <div class="info_3 fr">
      <div class="text_2 fff">
        <div class="fl">
          <img src="../images/info_6.png" />
          <div class="fl count">
            <p class="titleP">上月收费(元)</p>
            <p class="conuts">23452</p>
          </div>
        </div>
        <div class="fl">
          <img src="../images/info_7.png" />
          <div class="fl count">
            <p class="titleP">本月收费(元)</p>
            <p class="conuts">34345</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "titlePage",
  data() {
    return {};
  },
};
</script>

<style scoped lang="less">
.fff {
  display: flex;
}
.conuts {
  font-family: "yjsz";
  color: #00fbfe;
  text-shadow: 0 0 25px #00fbfe;
  font-size: 38px;
  font-weight: bolder;
}
.titleP {
  color: #fff;
  font-size: 16px;
}

.info_1 {
  width: 40%;
  height: 100%;
}
.info_1 .text_1 {
  width: calc(100% - 25px);
  height: 100%;
  background-color: #0c1629;
}
.info_1 .text_1 div {
  width: 33.3%;
  height: 100%;
  position: relative;
}
.info_1 .text_1 img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 15px;
}
.info_1 .text_1 .count {
  margin-left: 65px;
  width: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.info_2 {
  width: 31%;
  height: 100%;
}
.info_2 .text_2 {
  width: calc(100% - 25px);
  height: 100%;
  background-color: #0c1629;
}
.info_2 .text_2 div {
  width: 50%;
  height: 100%;
  position: relative;
}
.info_2 .text_2 img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 35px;
}
.info_2 .text_2 .count {
  margin-left: 85px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.info_3 {
  width: 29%;
  height: 100%;
  background: blue;
}

.info_3 .text_2 {
  width: 100%;
  height: 100%;
  background-color: #0c1629;
}
.info_3 .text_2 div {
  width: 50%;
  height: 100%;
  position: relative;
}
.info_3 .text_2 img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 35px;
}
.info_3 .text_2 .count {
  margin-left: 85px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

</style>
